<template>
	<view class="box">
		<navigator open-type="navigateBack" v-if="block">
			<image class="top_block" src="../../static/img/lefts.png" mode=""></image>
		</navigator>
		<view class="top_box flexs3">
			<view class="top_list" v-for="(item,index) in navList" :key="index"
				:class="tabCurrentIndex == index+1 ? 'top_border':'' " @click="tabClick(index+1)">
				{{item.text}}
			</view>
		</view>
		<navigator url="/pages/index/search">
			<image class="top_sousuo" src="../../static/image/search.png" mode=""></image>
		</navigator>
		<view :class="tabCurrentIndex == 4?'top_next_new':'top_next flexs3'">
			<view class="flexs1" @click="showSelectPopup(0)">
				<view class="top_title">发布时间</view>
				<image class="top_image" :src="navIndex == 0?defaultSrc:activitySrc" mode=""></image>
			</view>
			<view class="flexs1" @click="showSelectPopup(1)">
				<view class="top_title">行业分类</view>
				<image class="top_image" :src="navIndex == 1?defaultSrc:activitySrc" mode=""></image>
			</view>
			<view class="flexs1" @click="showSelectPopup(2)">
				<view class="top_title">价格</view>
				<image class="top_image" :src="navIndex == 2?defaultSrc:activitySrc" mode=""></image>
			</view>
		</view>
		<view class="top_kong"></view>
		<goods-list :tabCurrentIndex="tabCurrentIndex" :bueList="coursenew" v-show="tabCurrentIndex == 1">
		</goods-list>
		<goods-list :tabCurrentIndex="tabCurrentIndex" :bueList="coursenew" v-show="tabCurrentIndex == 2">
			<template >
				<view class="center_type">面试</view>
			</template>
		</goods-list>
		<goods-list :tabCurrentIndex="tabCurrentIndex" :bueList="coursenew" v-show="tabCurrentIndex == 3">
			<template >
				<view class="center_type">助攻</view>
			</template>
		</goods-list>
		<goods-list :tabCurrentIndex="tabCurrentIndex" :bueList="coursenew" v-show="tabCurrentIndex == 4">
			<template >
				<view class="center_type">职场</view>
			</template>
		</goods-list>
		<!-- <view class="center" v-if="tabCurrentIndex == 4">
			<view class="center_list flexs2" v-for="(item,index) in coursenew" :key="index">
				<view class="center_image">
					<image :src="picture.getImgUrl(item.image)" mode=""></image>
					<view class="center_type">职场</view>
				</view>
				<view class="center_right">
					<view class="top_titles">{{item.name}}</view>
					<view class="zhichang_time">{{item.createtime}}</view>
				</view>
			</view>
		</view> -->
		<view class="mask" v-if="releaseFlag || brandFlag || screenFlag"></view>
		<view class="model" v-show="navIndex ==0">
			<sort-model @pricenewtime="pricenewtime" :dataList="timeList" :releaindex="releaindex"></sort-model>
		</view>
		<tab-select v-show="navIndex == 1" @tabselect='tabselect'></tab-select>
		
		<view class="model" v-show="navIndex ==2">
			<sort-model @pricenewtime="pricenewtime" :dataList="moneyList" :releaindex="priceindex"></sort-model>
		</view>
	</view>
</template>

<script>
	import TabSelect from '@/components/TabSelect.vue'
	import SortModel from '@/components/SortModel.vue'
	import GoodsList from '@/pages/copydata/GoodsList.vue'
	import {
		Tabcournew,
		assists,
		workplace,
		Incation
	} from '../../api/data.js'
	export default {
		components: {
			SortModel,
			TabSelect,
			GoodsList
		},
		props: {
			block: {
				type: Boolean
			},
			bordernum: {
				type: String
			}
		},
		data() {
			return {
				//顶部导航index
				topindex: 1,
				//发布时间选择
				releaindex: 1,
				//价格选择
				priceindex: 1,
				listname: 0,
				//选项卡切换
				navIndex: -1,
				releaseFlag: false, //控制发布时间下拉框是否显示
				screenFlag: false, //控制价格下拉框是否显示
				brandFlag: false, //控制行业分类下拉框是否显示
				tabCurrentIndex: 1,
				//tab选项卡切换
				navList: [{
						state: 0,
						text: "笔试"
					},
					{
						state: 1,
						text: "面试"
					},
					{
						state: 2,
						text: "助攻"
					},
					{
						state: 3,
						text: "职场"
					}
				],
				//发布时间
				moneyList: [{
						id: 1,
						name: '价格',
						max: '0',
						min: '0'
					}, {
						id: 2,
						name: '免费',
						max: 'zero',
						min: '0'
					}, {
						id: 3,
						name: '￥0-100',
						max: '100',
						min: '0'
					},
					{
						id: 4,
						name: '￥100-1000',
						max: '1000',
						min: '100'
					}, {
						id: 5,
						name: '￥1000-1500',
						max: '1500',
						min: '1000'
					},
					{
						id: 6,
						name: '￥1500-2000',
						max: '2000',
						min: '1500'
					}, {
						id: 7,
						name: '￥2000-2500',
						max: '2500',
						min: '2000'
					},
					{
						id: 8,
						name: '￥2500以上',
						max: '99999999',
						min: '2500'
					}
				],
				timeList: [{
						id: 1,
						name: '发布时间',
						order: 1
					},
					{
						id: 2,
						name: '购买数量',
						order: 2
					},
					{
						id: 3,
						name: '浏览量',
						order: 3
					}
				],
				//笔试
				coursenew: [],
				activitySrc: '../../static/img/top.png',
				defaultSrc: '../../static/img/button.png',

				//分类切换
				current: 0,

				//笔试面试参数
				option: {
					type: 1,
					order: 1,
					price_min: 0,
					price_max: 0,
					class_id: ''
				},
			}
		},
		created(option) {
			this.tabCurrentIndex = this.bordernum || 1
			this.tabCurrentIndex == 3 ? this.pricetime(this.option) : this.serctime(this.option);
		},

		methods: {
			//笔试面试请求
			serctime(data) {
				console.log("dd")
				Tabcournew(data).then((res) => {
					this.coursenew = res.data;
				})
			},
			//助攻请求
			pricetime(data) {
				console.log(data)
				assists(data).then((res) => {
					this.coursenew = res.data;
				})
			},
			//顶部tab点击
			tabClick(index) {
				this.option.class_id = ''
				this.navIndex = -1
				this.brandFlag = false
				this.releaseFlag = false
				this.screenFlag = false
				this.topindex = index
				this.tabCurrentIndex = index;
				this.option.type = index
				if (index < 3) {
					this.serctime(this.option)
				} else if (index == 3) {
					this.pricetime(this.option)
				} else if (index == 4) {
					workplace().then((res) => {
						this.coursenew = res.data
					})
				}

			},
			//筛选切换
			showSelectPopup(index) {
				if (index == 0) {
					if (this.releaseFlag) {
						this.navIndex = -1
						this.brandFlag = false
						this.screenFlag = false
					} else {
						this.navIndex = index
						this.brandFlag = false
						this.screenFlag = false
					}
					this.releaseFlag = !this.releaseFlag
				} else if (index == 1) {
					if (this.brandFlag) {
						this.navIndex = -1
						this.screenFlag = false
						this.releaseFlag = false
					} else {
						this.navIndex = index
						this.screenFlag = false
						this.releaseFlag = false
					}
					this.brandFlag = !this.brandFlag
				} else if (index == 2) {
					if (this.screenFlag) {
						this.navIndex = -1
						this.brandFlag = false
						this.releaseFlag = false
					} else {
						this.navIndex = index
						this.brandFlag = false
						this.releaseFlag = false
					}
					this.screenFlag = !this.screenFlag
				}

			},
			//选择时间
			pricenewtime(id) {
				this.releaindex = id.id
				if (id.order) {
					this.option.order = id.order
				} else {
					this.priceindex = id.id
					this.option.price_min = id.min || 0
					this.option.price_max = id.max || 0
				}
				if (this.tabCurrentIndex == 1 || this.tabCurrentIndex == 2) {
					this.serctime(this.option)
				} else if (this.tabCurrentIndex == 3) {
					this.pricetime(this.option)
				}
				this.navIndex = -1
				this.brandFlag = false
				this.releaseFlag = false
				this.screenFlag = false
			},
			//确定
			tabselect(list) {
				this.option.class_id = list;
				if (this.topindex == 1 || this.topindex == 2) {
					console.log(this.option)
					this.serctime(this.option)
				} else if (this.topindex == 3) {
					this.pricetime(this.option)
				}
				this.navIndex = -1
				this.brandFlag = false
				this.releaseFlag = false
				this.screenFlag = false
			}
		}

	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		position: relative;
		color: #333;

		.top_box {
			width: 100%;
			height: 100rpx;
			padding: 0 90rpx;
			font-size: 34rpx;
			background-color: #fff;

			.top_list {
				padding-bottom: 10rpx;
			}

			.top_border {
				font-size: 36rpx;
				font-weight: 700;
				border-bottom: solid 2rpx #ffdd47;
			}
		}

		.top_sousuo {
			width: 28rpx;
			height: 30rpx;
			position: absolute;
			right: 30rpx;
			transform: translateY(-70rpx);
		}

		.top_block {
			width: 20rpx;
			height: 36rpx;
			position: absolute;
			left: 15px;
			top: 20px;
		}

		.top_next {
			width: 100%;
			line-height: 70rpx;
			font-size: 26rpx;
			background-color: #fff;

			.top_title {
				margin-right: 8rpx;
				font-size: 26rpx;
			}

			.top_image {
				width: 16rpx;
				height: 10rpx;
			}
		}

		.top_next_new {
			display: none;
		}

		.top_kong {
			width: 100%;
			height: 20rpx;
			background-color: #f5f5f5;
		}

		.center {
			width: 100%;
			height: auto;
			background-color: #fff;
			padding: 0 30rpx;

			.center_list {
				width: 100%;
				height: 190rpx;

				.center_image {
					width: 196rpx;
					height: 130rpx;
					border-radius: 10rpx;
					background-size: 100% 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

					.center_type {
						width: 70rpx;
						height: 30rpx;
						background: #ff3b30;
						border-radius: 10rpx 0 10rpx 0;
						color: #fff;
						font-size: 22rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						top: -136rpx;
						left: 0rpx;
					}
				}

				.center_right {
					width: 474rpx;
					height: 100%;
					border-bottom: solid 1rpx #f5f5f5;
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-direction: column;
					padding-bottom: 30rpx;

					.top_titles {
						color: #333;
						font-size: 28rpx;
						font-weight: 700;
					}

					.center_study {
						margin-top: 6rpx;
						color: #666;
						font-size: 24rpx;

						image {
							width: 28rpx;
							height: 26rpx;
							margin-right: 6rpx;
						}
					}

					.center_btm {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

					}

					.center_pay {
						font-size: 22rpx;
						color: #999;
					}

					.cemter_last {
						text-align: end;
						font-size: 34rpx;
						color: #ff3b30;
						font-weight: 700;
					}
				}

				.zhichang_time {
					height: 70rpx;
					color: #999;
					font-size: 24rpx;
					line-height: 60rpx;
				}
			}

		}

		.mask {
			position: fixed;
			top: 200rpx;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, .4);
		}

		.model {
			width: 100%;
			height: auto;
			color: #333;
			font-size: 28rpx;
			position: absolute;
			top: 192rpx;

			.time_center {
				width: 100%;
				height: auto;
				background-color: #fff;
				font-size: 14px;
			}

			.right_box {
				padding: 0 30rpx;

				.right_list {
					width: 100%;
					line-height: 100rpx;
					font-size: 28rpx;
				}

				.time_font {
					font-weight: 700;
				}

				.right_chexs {
					image {
						width: 26rpx;
						height: 18rpx;
					}
				}
			}

			.model_left_box {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				background-color: #fff;

				.model_left {
					width: 200rpx;
					line-height: 100rpx;
					text-align: center;
					background-color: #ddd;
					font-size: 28rpx;

					.left_list {
						position: relative;
					}

					.model_border {
						background-color: #fff;

						.left_color {
							width: 4rpx;
							height: 20rpx;
							background-color: #ffdd47;
							position: absolute;
							left: 0;
						}
					}
				}

				.model_right {
					width: 550rpx;
					height: 500rpx;
					background-color: #fff;
					overflow-y: auto;

					.right_box {
						padding: 0 30rpx;

						.right_list {
							width: 100%;
							line-height: 100rpx;
							font-size: 28rpx;
						}

						.right_chexs {
							image {
								width: 26rpx;
								height: 18rpx;
							}
						}
					}
				}


			}

			.bottom_bs {
				width: 50%;
				height: 88rpx;
				background-color: #fff;
				font-size: 30rpx;
			}

			.bottom_ps {
				width: 50%;
				height: 88rpx;
				background-color: #ffdd47;
				font-size: 30rpx;

			}

		}
	}
</style>
